<template>
	<div class="page">
		<div class="login-wrap">
			<div class="title">开发者注册</div>
			<el-form
				ref="formRef"
				:model="form"
				label-width="100px"
				status-icon
				:rules="rules"
			>
				<el-form-item label="用户名称" prop="username">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="loginPwd">
					<el-input
						type="password"
						v-model="form.loginPwd"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item label="平台名称" prop="platformName">
					<el-input v-model="form.platformName"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="电子邮件" prop="email">
					<el-input v-model="form.email"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="mobile">
					<el-input v-model="form.mobile"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm()"> 立即注册 </el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import request from "@/utils/request";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { md5 } from "js-md5";
let formRef = ref();
const router = useRouter();
let form = reactive({
	username: "", //用户名称
	loginPwd: "", //登录密码
	name: "",
	platformName: "", //平台名称
	email: "", //电子邮箱
	mobile: "", //手机号
});
let rules = {
	username: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
	loginPwd: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
	name: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
	platformName: [
		{ required: true, message: "请输入平台名称", trigger: "blur" },
	],
	email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
	mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
};
const submitForm = async () => {
	formRef.value.validate(async (valid) => {
		if (valid) {
			let res = await request({
				url: "/user/user/add",
				method: "post",
				data: {
					...form,
					password: md5(form.loginPwd),
				},
			});
			if (res.code === 200) {
				ElMessage.success("注册成功");
				router.push({
					path: "/login",
				});
			}
			console.log(res);
		}
	});
};
</script>
<style lang="scss" scoped>
.page {
	display: flex;
	justify-content: center;
	align-items: center;
	.login-wrap {
		margin-top: 150px;
		width: 600px;
		.title {
			color: #248df9;
			text-align: center;
			margin-bottom: 20px;
		}
	}
}
</style>
